<!--
 * @Description: 修改备注的弹窗
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 17:21:37
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-04-20 23:14:20
 -->
<template>
  <div class="div-inline">
    <el-button size="mini" type="success" class="el-icon-edit el-button-mini-5-12" @click="to"> {{ name }} </el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'修改备注信息'" width="600px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="备注信息" prop="service_remark">
          <el-input v-model="form.service_remark" :rows="8" type="textarea" style="width:90%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        id: '',
        remark: ''
      },
      dialog: false,
      loading: false
    }
  },
  methods: {
    to() {
      this.form = {
        id: this.data.id,
        service_remark: this.data.service_remark.replace(new RegExp("<br>", "gm"), '\n'),
      }
      this.dialog = true
    },
    doSubmit() {
      this.$api.order.service
        .changeRemark({
          data: this.form
        })
        .then(res => {
          this.$notify({ title: '提示', message: '修改备注成功', type: 'success', duration: 2500 })
          this.dialog = false
          this.$emit('init')
        }).catch(err => {
          console.log(err)
          this.$notify({ title: '错误', message: '修改备注失败', type: 'error', duration: 2500 })
        })
    }
  }
}
</script>

<style scoped>
  .div-inline {
    display: inline;
    margin-right: 3px;
  }
</style>
